window.addEventListener('load', function () {
    var preview_img = document.querySelector('.preview_img');
    var mask = document.querySelector('.mask');
    var big = document.querySelector('.big');
    // 1. 当我们鼠标经过 preview_img 就显示和隐藏 mask 遮挡层 和 big 大盒子
    preview_img.addEventListener('mouseover', function () {
        mask.style.display = 'block';
        big.style.display = 'block';
    })
    preview_img.addEventListener('mouseout', function () {
        mask.style.display = 'none';
        big.style.display = 'none';
    })
    // 2. 鼠标移动的时候，让黄色的盒子跟着鼠标来走
    preview_img.addEventListener('mousemove', function (e) {
        // (1). 先计算出鼠标在盒子内的坐标
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        // console.log(x, y);
        // (2) 减去盒子高度 300的一半 是 150 就是我们mask 的最终 left 和top值了
        // (3) 我们mask 移动的距离
        var maskX = x - mask.offsetWidth / 2;
        var maskY = y - mask.offsetHeight / 2;
        // (4) 如果x 坐标小于了0 就让他停在0 的位置
        // 遮挡层的最大移动距离
        var maskMax = preview_img.offsetWidth - mask.offsetWidth;
        if (maskX <= 0) {
            maskX = 0;
        } else if (maskX >= maskMax) {
            maskX = maskMax;
        }
        if (maskY <= 0) {
            maskY = 0;
        } else if (maskY >= maskMax) {
            maskY = maskMax;
        }
        mask.style.left = maskX + 'px';
        mask.style.top = maskY + 'px';
        // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片最大移动距离 / 遮挡层的最大移动距离
        // 大图
        var bigIMg = document.querySelector('.bigImg');
        // 大图片最大移动距离
        var bigMax = bigIMg.offsetWidth - big.offsetWidth;
        // 大图片的移动距离 X Y
        var bigX = maskX * bigMax / maskMax;
        var bigY = maskY * bigMax / maskMax;
        bigIMg.style.left = -bigX + 'px';
        bigIMg.style.top = -bigY + 'px';

    })
    //4.添加/减少商品数量
    $(".add").click(function () {
        // 得到当前兄弟文本框的值
        let n = $(this).siblings(".itxt").val();
        // console.log(n);
        n++;
        $(this).siblings(".itxt").val(n);
        $(".reduce").css("cursor", "pointer")
    })
    $(".reduce").click(function () {
        // 得到当前兄弟文本框的值
        let n = $(this).siblings(".itxt").val();
        if (n == 1) {

            $(".reduce").css("cursor", "not-allowed")
            return false;
        }
        // console.log(n);
        n--;
        $(this).siblings(".itxt").val(n);
    })
    //5.手机款式 选项
    //颜色
    $(".phone_color").eq(0).addClass("current");
    $(".phone_color").click(function () {
        $(this).addClass("current");
        //  其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings(".phone_color").removeClass("current");
    })
    //版本
    $(".phone_version").eq(0).addClass("current");
    $(".phone_version").click(function () {
        $(this).addClass("current");
        //  其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings(".phone_version").removeClass("current");
    })
    //购买方式
    $(".buy_way").eq(0).addClass("current");
    $(".buy_way").click(function () {
        $(this).addClass("current");
        //  其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings(".buy_way").removeClass("current");
    })
    //6.tab切换
    $(".detail_tab_list li").click(function () {
        // 链式编程操作
        $(this).addClass("current").siblings().removeClass("current");
        // 2.点击的同时，得到当前li 的索引号
        let index = $(this).index();
        console.log(index);
        // 3.让下部里面相应索引号的item显示，其余的item隐藏
        $(".detail_tab_con .item").eq(index).show().siblings().hide();
    })
    //7.不同手机 选择
    $(".phone_change").click(function () {
        $(this).addClass("current");
        //  其余的兄弟去掉背景颜色 隐式迭代
        $(this).siblings(".phone_change").removeClass("current");
    })
    //8.查看更多参数 
    $(".more").hover(function () {
        $(this).siblings("ul").slideToggle();
    })
})
